<template>
  <a-modal
    :width="800"
    v-model="visible"
    :title="title"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="任务名称">
        <a-input v-model="form.name" placeholder="请输入任务名称" />
      </a-form-model-item>
      <a-form-model-item label="任务描述">
        <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" v-model="form.remark" placeholder="请输入任务描述" />
      </a-form-model-item>
      <a-form-model-item label="数据集">
        <a-select v-model="form.dataSource" placeholder="请选择要处理的数据集类型">
          <a-select-option v-for="source in dataSourceOptions" :key="source.value" :value="source.value">
            {{ source.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="标注场景">
        <a-select v-model="form.scenario" placeholder="请选择具体的标注场景类型">
          <a-select-option v-for="scene in scenarioOptions" :key="scene.value" :value="scene.value">
            {{ scene.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="评测结果保存路径">
        <a-input v-model="form.result" placeholder="请输入评测结果的保存路径，如：/data/results/" />
      </a-form-model-item>
      <a-form-model-item label="标签">
        <a-select
          style="width: 160px"
          placeholder="请选择相关标签"
          :options="labelOptions"
          v-model="form.labels"
        ></a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      dataSourceOptions: [
        { label: '通用对话数据集', value: 'general-dialogue' },
        { label: '代码生成数据集', value: 'code-generation' },
        { label: '数学推理数据集', value: 'math-reasoning' },
        { label: '文本摘要数据集', value: 'text-summary' },
        { label: '多语言翻译数据集', value: 'translation' },
      ],
      labelOptions: [
        { label: '标签1', value: 'tag-1' },
        { label: '标签2', value: 'tag-2' },
      ],
      form: {
        name: '',
        remark: '',
        result: '',
        labels: [],
        scenario: undefined,
      },
      scenarioOptions: [
        { label: '文本分类标注', value: 'text-classification' },
        { label: '命名实体识别', value: 'ner' },
        { label: '关系抽取', value: 'relation-extraction' },
        { label: '文本聚类', value: 'text-clustering' },
        { label: '情感分析', value: 'sentiment-analysis' },
      ],
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleOk() {
      // 表单验证
      if (!this.form.name.trim()) {
        this.$message.error('请输入任务名称')
        return
      }

      if (!this.form.result.trim()) {
        this.$message.error('请输入评测结果保存路径')
        return
      }

      if (!this.form.scenario) {
        this.$message.error('请选择标注场景')
        return
      }

      const now = new Date()
      const createTime =
        now.getFullYear() +
        '-' +
        String(now.getMonth() + 1).padStart(2, '0') +
        '-' +
        String(now.getDate()).padStart(2, '0') +
        ' ' +
        String(now.getHours()).padStart(2, '0') +
        ':' +
        String(now.getMinutes()).padStart(2, '0') +
        ':' +
        String(now.getSeconds()).padStart(2, '0')

      // 构建提交数据
      const params = {
        id: Date.now(),
        name: this.form.name.trim(),
        remark: this.form.remark.trim(),
        result: this.form.result.trim(),
        dataSource: this.form.dataSource,
        scenario: this.form.scenario,
        labels: this.form.labels,
        createTime: createTime,
      }

      // TODO: 调用创建任务API
      // this.$api.assessment.createMission(params).then(res => {
      //   if (res.code === 0) {
      //     this.$message.success('创建成功')
      //     this.$emit('success')  // 通知父组件刷新列表
      //     this.closeModal()
      //   } else {
      //     this.$message.error(res.message || '创建失败')
      //   }
      // }).catch(err => {
      //   this.$message.error('创建失败：' + err.message)
      // })

      // 临时模拟API调用
      this.$message.success('创建成功')
      this.$emit('success', params)
      this.closeModal()
    },
    closeModal() {
      this.visible = false
      // 重置表单
      this.form = {
        name: '',
        remark: '',
        result: '',
        dataSource: undefined,
        scenario: undefined,
        modals: [],
        labels: [],
      }
    },
    showModal(record) {
      this.visible = true
      this.title = '新建任务'
    },
    closeModal() {
      this.visible = false
    },
    handleAddModal() {
      this.form.modals.push({
        id: Date.now(),
        resourece: '',
        modal: [],
      })
    },
    handleResChange(e, row) {
      console.log(e, row)
    },
  },
}
</script>

<style lang="less" scoped></style>
